<script setup lang="ts">
import { computed, provide, reactive, ref } from 'vue';
import Searching from '../components/Searching.vue'
import { userinfo } from '@/stores/counter'

const user = userinfo()
const showingMore = ref(false)

provide('more', showingMore)

const datas = computed(() => {
  let arr = []
  // datas按照每三个一行切分
  for (let i = 0; i < user.pages.search.list.length; i += 3) {
    arr.push(user.pages.search.list.slice(i, i + 3).map((item: number) => item));
  }
  return arr;
})

const rownum = computed(() => {
  return Math.ceil(user.searchArticleNum / 3)
})

const switchMode = () => {
  showingMore.value = true
}

</script>

<template>
  <div class="home-div">
    <Searching :more="showingMore" />
    <div class="saying-line"></div>
    <div class="card-section" v-if="datas.length >= 0">
      <div class="not-found" v-if="datas.length==0">
        暂无资源
      </div>
      <div class="card-row" v-for="(item, index) in datas" :key="index">
        <Newscard v-for="(newData, index) in item" :key="index" :article-id="newData" />
      </div>
    </div>
    <div class="news-more font-xbs" @click="switchMode" v-if="user.pages.search.total - rownum * 3 > 0">
      展开更多
    </div>
  </div>
</template>

<style scoped>
.news-more {
  margin-top: 30px;
  color: #f59009;
  font-size: 24px;
  cursor: pointer;
}

.home-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-section {
  width: 1920px;
  max-width: 1920px;
  height: max-content;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-row {
  width: 100%;
  height: max-content;
  /* background-color: aqua; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.saying-line {
  height: 2px;
  width: 1200px;
  background-color: #f2ac1c;
}

.not-found {
  font-size: 26px;
  color: #000000;
  margin: 200px 0;
}
</style>
